/**
 * 课程6 图形定位
 *
 * 方法1： flyTo
 * map.flyTo({center: [121.48211102197638, 31.22894997464809]})
 * 方法2  fitBounds
 * let line_box = turf.bbox(map.getSource('lineSource')._data)
 * map.fitBounds(line_box)
 *
 */

mapboxgl.accessToken = 'pk.eyJ1IjoiNGgzajgiLCJhIjoiY202cTRneXdpMDlheDJpb21rdGs2M3V6cSJ9.Ifg4pD0p8LxYmxmxwoTBNA';

const map = (window.map = new mapboxgl.Map({
  container: 'map',
  center: [121.74380266722233, 31.097567372835357],
  zoom: 10,
  style: 'mapbox://styles/mapbox/standard',
  minZoom: 10,
  maxZoom: 21
}));

const lineLayer = () => {
  // 基础线路数据
  var lineData = {
    'type': 'FeatureCollection',
    'features': [
      {
        'type': 'Feature',
        'geometry': {
          'type': 'LineString',
          'coordinates': [
            [121.48370205699933, 31.231503492530862],
            [121.48458897364605, 31.230307571631073],
            [121.48564645118626, 31.230074219446493]
          ]
        },
        'properties': {
          lineJoin: 'round',
          lineCap: 'round',
          lineColor: '#ff0000',
          lineWidth: 5,
        }
      },
      {
        'type': 'Feature',
        'geometry': {
          'type': 'LineString',
          'coordinates': [
            [121.48564645118626, 31.230074219446493],
            [121.48541173370899, 31.230751261572053],
            [121.48675883640612, 31.231174943859813]
          ]
        },
        'properties': {
          lineJoin: 'round',
          lineCap: 'round',
          lineColor: '#000',
          lineWidth: 4,
        }
      },
    ]
  }

  // 3 创建数据源并添加
  var lineSource = {
    type: 'geojson',
    data: {
      type: "FeatureCollection",
      features: []
    },
  }
  map.addSource('lineSource', lineSource)
  var line_source = map.getSource('lineSource');
  line_source.setData(lineData)


  // 4 创建图层并添加
  var lineLayer = {
    id: 'lineLayer',
    type: 'line',
    source: 'lineSource',
    // 特殊化定制 https://docs.mapbox.com/style-spec/reference/layers/#line
    'layout': {
      'line-join': ['get', 'lineJoin'],
      'line-cap': ['get', 'lineCap']
    },
    'paint': {
      'line-color': ['get', 'lineColor'],
      'line-width': ['get', 'lineWidth']
    }
  }
  map.addLayer(lineLayer)
}

const pointLayer = () => {
  map.loadImage(
    'https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png', (error, image) => {
      if (error) throw error;
      map.addImage('custom-marker', image);
    })

// 2 基础点位数据
  var pointDataGeojson2 = {
    'type': 'FeatureCollection',
    'features': [
      {
        // feature for Mapbox DC
        'type': 'Feature',
        'geometry': {
          'type': 'Point',
          'coordinates': [
            121.48211102197638, 31.22894997464809
          ]
        },
        'properties': {
          'title': 'Mapbox DC',
          icon: 'custom-marker',
        }
      },
      {
        // feature for Mapbox DC
        'type': 'Feature',
        'geometry': {
          'type': 'Point',
          'coordinates': [
            121.48343561046238, 31.227123120578284
          ]
        },
        'properties': {
          'title': 'Mapbox DC',
          icon: 'custom-marker',
        }
      },
    ]
  }

// 3 创建数据源并添加
  var pointSource = {
    type: 'geojson',
    data: {
      type: "FeatureCollection",
      features: []
    },
  }
  map.addSource('pointSource', pointSource)
  var point_source = map.getSource('pointSource');
  point_source.setData(pointDataGeojson2)


// 4 创建图层并添加
  var pointLayer1 = {
    id: 'pointLayer2',
    type: 'symbol',
    source: 'pointSource',
    layout: {
      // 为图层设置引用的图片ID
      "icon-image": ['get', 'icon'],
      "icon-size": .7,
    }
  }
  map.addLayer(pointLayer1)
}

const polygonLayer = () => {
  // 基础面数据
  var polygonData = {
    'type': 'FeatureCollection',
    'features': [
      {
        'type': 'Feature',
        'geometry': {
          'type': 'Polygon',
          'coordinates': [
            [
              [121.4740719374974, 31.230417047893894],

              [121.47537241460122, 31.230372094620677],
              [121.47833070695839, 31.230858922978314],
              [121.47933541002544, 31.22927433519868],
              [121.47575196909128, 31.2273651580023],
              [121.47428956796307, 31.228443847858117],

              [121.4740719374974, 31.230417047893894],

            ]
          ]
        },
        'properties': {
          fillColor: '#ff0000',
          fillOpacity: 0.5
        }
      },
    ]
  }

// 3 创建数据源并添加
  var polygonSource = {
    type: 'geojson',
    data: {
      type: "FeatureCollection",
      features: []
    },
  }
  map.addSource('polygonSource', polygonSource)
  var polygon_Source = map.getSource('polygonSource');
  polygon_Source.setData(polygonData)


// 4 创建图层并添加
  var polygonLayer = {
    id: 'polygonLayer',
    type: 'fill',
    source: 'polygonSource',
    layout: {},
    // 特殊化定制 https://docs.mapbox.com/style-spec/reference/layers/#fill
    'paint': {
      'fill-color': ['get', 'fillColor'],
      'fill-opacity': ['get', 'fillOpacity'],
    }
  }
  map.addLayer(polygonLayer)
}

const main = () => {
  pointLayer()
  lineLayer()
  polygonLayer()
  // console.log(map.getSource('lineSource')._data)
  // let line_box = turf.bbox(map.getSource('lineSource')._data.features[1])
  // console.log(line_box)
  // map.fitBounds(line_box)


  // let polygon_box = turf.bbox(map.getSource('polygonSource')._data)
  // console.log(polygon_box)
  // map.fitBounds(polygon_box)

  let point_box = turf.bbox(map.getSource('pointSource')._data.features[0])
  console.log(point_box)
  map.fitBounds(point_box)
  // map.flyTo({center: [121.48211102197638, 31.22894997464809], zoom: 15, speed: 0.5, curve: 1.5, essential: true})
}




map.on('load', () => {
  main()
})
